<template>
  <div class="app-container">
   <el-row :gutter="30">
     <center><h1>一车一档</h1></center>
      <el-col :span="5"><div class="grid-content bg-purple" style="border: 1px solid #000;height: 100%">
            <div id="box">
                  <div class="product-content1">
                    <image-preview :src="item.image" alt="Dynamic Image" class="fixed-image-size"/>
                    <div class="info align-left">
                      <h4>车牌号：{{ item.licensePlate }}</h4>
                      <h4>创建时间：{{ item.createDate }}</h4>
                      <h4>车主：{{ item.name }}</h4>
                      <h4>车主手机：{{ item.iphone }}</h4>
                      <h4>证件号码：{{ item.idCardNumber }}</h4>
                      <h4>住址：{{ item.residenceAddress }}</h4>
                      <h4>所属小区：{{ item.communityName }}</h4>
                    </div>
                  </div>
            </div>
        </div></el-col>
     <el-col :span="19">
       <div class="grid-content bg-purple" style="border: 1px solid #000; height: 100%">
       <el-row :gutter="20">
         <el-col :span="16">
           <div class="grid-content bg-purple" style="border: 1px solid #000; height: 200px; position: relative;">
             <h3 style="position: absolute; top: 10px; left: 10px; margin: 0;">车辆信息</h3>
             <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
               <el-empty description="最近半年无记录" :image-size="100"></el-empty>

             </div>
           </div>
           <br></el-col>
         <el-col :span="8"><div class="grid-content bg-purple" style="border: 1px solid #000; height: 200px">
           <h3>住房信息</h3>


         </div><br></el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="16">
           <div class="grid-content bg-purple" style="border: 1px solid #000; height: 200px; position: relative;">
             <h3 style="position: absolute; top: 10px; left: 10px; margin: 0;">车辆信息</h3>
             <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
               <el-empty description="最近半年无记录" :image-size="100"></el-empty>




             </div>
           </div><br></el-col>
         <el-col :span="8">
           <div class="grid-content bg-purple" style="border: 1px solid #000; height: 200px; position: relative;">
             <h3 style="position: absolute; top: 10px; left: 10px; margin: 0;">车辆信息</h3>
             <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
               <el-empty description="最近半年无记录" :image-size="100"></el-empty>



             </div>
           </div>
           <br>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="24">
           <div class="grid-content bg-purple" style="border: 1px solid #000; height: 200px; position: relative;">
             <h3 style="position: absolute; top: 10px; left: 10px; margin: 0;">关联关系</h3>
             <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
               <el-avatar :src="item.picture" class="avatar" :size="100"></el-avatar>



             </div>
           </div>
         </el-col>
       </el-row>
     </div></el-col>
   </el-row>
  </div>
</template>
<script>
import { listPopulation, getPopulation, delPopulation, addPopulation, updatePopulation ,handleimport} from "@/api/community/population";
import { listDistrict} from "@/api/community/district";

export default {
  name: "Document",
  data() {
    return {
      item:'',
      currentView: '', // 控制显示哪个盒子
      populationNum: 0,
      buildingCount: 0,
      selectedItems:[],
      dialogVisible: false,
      selectedFile:null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 实有人口统计表格数据
      populationList: [],
      districtList:[],
      districtLists:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        id:null,
        pageNum: 1,
        pageSize: 10,
        name: null,
        gender: null,
        picture: null,
        age: null,
        idCardNumber: null,
        residenceAddress: null,
        registrationDate: null,
        iphone: null,
        nation: null,
        districtId: null
      },
      // 表单参数
      form: {},

      queryParam:{},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        idCardNumber: [
          { required: true, message: "身份证号码不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
     this.item = this.$route.params.item
    if (this.item != null && this.item != undefined && this.item !== '') {
      localStorage.setItem('item', JSON.stringify(this.item));
    }
    this.item = JSON.parse(localStorage.getItem('item'));
  },
  methods: {

  }
};
</script>

<style scoped>
.product-content1{
  box-sizing: border-box;
  padding: 5px;
}
.align-left {
  list-style: none;
  text-align: left;
}
.avatar {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 使用 contain 适应容器 */
   img{
     width: 100%;
     height: 100%;
   }
}

</style>
